<template>
  <div class="user">
    <a-form
      class="user-form"
      :model="state.userInfo"
      :label-col="{ span: 2 }"
      :wrapper-col="{ span: 4 }"
    >
      <a-form-item label="用户昵称" name="nickname">
        <a-input v-model:value="state.userInfo.nickname" />
      </a-form-item>
      <a-form-item label="性别" name="sex">
        <a-radio-group v-model:value="state.userInfo.sex">
          <a-radio value="male">男</a-radio>
          <a-radio value="female">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="生日" name="birthday">
        <a-date-picker
          v-model:value="state.userInfo.birthday"
          placeholder="选择出生日期"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="头像" name="region">
        <a-avatar size="large">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </a-form-item>
      <a-form-item label="格言" name="maxim">
        <a-textarea v-model:value="state.userInfo.maxim" />
      </a-form-item>
      <a-form-item label="电话" name="phone">
        <a-input v-model:value="state.userInfo.phone" />
      </a-form-item>
      <a-form-item label="邮箱" name="email">
        <a-input v-model:value="state.userInfo.email" />
      </a-form-item>
      <a-form-item label="QQ" name="qq">
        <a-input v-model:value="state.userInfo.qq" />
      </a-form-item>
      <a-form-item label="地址" name="location">
        <a-input v-model:value="state.userInfo.location" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 4, offset: 2 }">
        <a-button type="primary" block>保存</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';
import moment from 'moment';

const state = reactive({
  userInfo: {
    nickname: '华夏★紫穹',
    sex: 'male',
    birthday: moment('1995-05-09', 'YYYY-MM-DD'),
    maxim: '我若成佛，天下无魔，我若成魔，佛奈我何！',
    phone: '15611637333',
    email: 'zp95sky@163.com',
    qq: '2430168648',
    location: '北京海淀'
  },
  rules: {
    nickname: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
    date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],
    type: [
      {
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change',
      },
    ],
    resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
    desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
  }
});

const renameSoftware = id => {
  console.log('rename: ' + id);
};

const deleteSoftware = id => {
  console.log('delete: ' + id);
};

const dateChange = () => {
  console.log(state.userInfo.birthday)
}

export default defineComponent({
  setup() {
    return {
      state,

      renameSoftware,
      deleteSoftware,
      dateChange
    };
  },
  components: {
    UserOutlined
  }
});
</script>

<style scoped lang="scss">
  .user {
  }
</style>
